<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">编辑岗位 API 权限</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <p-button label="返回" (click)="goBack()"></p-button>
                    <div style="margin-left: 10px;">当前编辑岗位：{{currentItem.roleName}}</div>
                </div>
                <div class="p-toolbar-group-right formgroup-inline">
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="全选"
                            icon="pi pi-plus"
                            class="p-button-outlined p-button-secondary"
                            (click)="selectAll()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="全不选"
                            icon="pi pi-plus"
                            class="p-button-outlined p-button-secondary"
                            (click)="selectNone()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            type="button"
                            label="保存"
                            icon="pi pi-cloud-upload"
                            *ngIf="hasChange"
                            class="mr-2"
                            (click)="save()"
                        ></button>
                    </div>
                    <div class="field">
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="取消配置"
                            *ngIf="hasChange"
                            class="p-button-outlined p-button-secondary"
                            (click)="reset()"
                        ></button>
                    </div>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="col-12">
        <div class="card" style="min-height: 625px">
            <p-treeTable
                [value]="tableData"
                responsiveLayout="scroll"
                [rowHover]="true"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th width="80%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                权限名称
                            </div>
                        </th>
                        <th width="20%">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                选择权限
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                    <tr [ttRow]="rowNode">
                        <td>
                            <p-treeTableToggler
                                [rowNode]="rowNode"
                            ></p-treeTableToggler>
                            {{ rowData.name }}
                        </td>
                        <td>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="已选择"
                                *ngIf="rowData.roleId == id"
                                class="p-button-success"
                                icon="pi pi-check"
                                (click)="unSelectRow(rowData)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="未选择"
                                *ngIf="rowData.roleId != id"
                                icon="pi pi-plus"
                                class="p-button-outlined p-button-secondary"
                                (click)="selectRow(rowData)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="7">没有找到统计信息</td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="loadingbody">
                    <tr>
                        <td colspan="7">正在加载统计信息，请稍等</td>
                    </tr>
                </ng-template>
            </p-treeTable>
        </div>
    </div>
</div>
<p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
<p-toast></p-toast>